<template>
  <div>
    <ma-crud ref="crudRef" :columns="columns" :options="crud">
      <template #search-modelName="{ searchForm, component }">
        <a-input
          v-model.trim="searchForm[component.dataIndex]"
          :style="{ width: '240px' }"
          allow-clear
          placeholder="请输入流程名称"
        >
          <template #prefix>
            <icon-search />
          </template>
        </a-input>
      </template>
      <template #modelName="{ record }">
        <a-link>{{ record.modelName }}</a-link>
      </template>
      <template #version="{ record }">
        <a-tag color="blue">v{{ record.version }}</a-tag>
      </template>
      <template #operationAfterExtend="{ record }">
        <a-link @click="handleOpenDesigner(record)">设计</a-link>
        <a-dropdown position="bottom">
          <a-link
            >更多
            <icon-down />
          </a-link>
          <template #content>
            <a-doption>部署</a-doption>
            <a-doption>历史</a-doption>
            <a-doption>流程图</a-doption>
          </template>
        </a-dropdown>
      </template>
    </ma-crud>
    <a-modal
      :body-style="{ padding: 0, height: '100%' }"
      :footer="null"
      :title="dialog.title"
      :visible="dialog.visible"
      fullscreen
      top="0"
      @cancel="handleCancel"
      @ok="handleOk"
    >
      <process-designer :bpmnXml="designerData.bpmnXml" :designerForm="designerData.form" @save="handleSaveDesigner" />
    </a-modal>
  </div>
</template>

<script lang="ts" name="Model" setup>
import { addWfModel, delWfModel, listWfModel, updateWfModel } from "@/api/workflow/design";
import dayjs from "dayjs";

const designerData = ref({
  form: {
    processName: null,
    processKey: null
  },
  modelId: null,
  bpmnXml: null
});
const dialog = reactive<DialogOption>({
  visible: false,
  title: ""
});
const crud = reactive({
  id: "modelId",
  pk: "modelId",
  title: "流程查询",
  formLayout: "vertical",
  formOption: {
    width: 600,
    layout: [
      {
        formType: "grid",
        gutter: 16,
        cols: [
          { span: 12, formList: [{ dataIndex: "modelName" }] },
          { span: 12, formList: [{ dataIndex: "category" }] },
          { span: 24, formList: [{ dataIndex: "description" }] }
        ]
      }
    ]
  },
  api: listWfModel,
  showIndex: true,
  operationColumn: true,
  operationColumnAlign: "center",
  operationColumnWidth: 220,
  pageLayout: "normal",
  requestParams: { orderBy: "createTime", orderType: "desc" },
  add: { api: addWfModel, auth: ["system:model:add"], text: "新增", show: true },
  edit: { api: updateWfModel, auth: ["system:model:edit"], text: "编辑", show: true },
  delete: { api: delWfModel, auth: ["system:model:remove"], text: "删除", show: true }
});
const columns = reactive([
  {
    title: "流程编号",
    dataIndex: "modelId",
    align: "center",
    hide: true
  },
  {
    title: "流程标识",
    dataIndex: "modelKey",
    align: "center",
    addDisplay: false,
    editDisplay: false,
    addDefaultValue: () => "Process_" + dayjs().valueOf()
  },
  {
    title: "流程名称",
    dataIndex: "modelName",
    align: "center",
    search: true,
    editDisabled: true,
    addDefaultValue: () => "业务流程_" + dayjs().valueOf(),
    commonRules: {
      required: true,
      message: "请输入流程名称"
    }
  },
  {
    title: "流程分类",
    dataIndex: "category",
    formType: "select",
    align: "center",
    search: true,
    dict: {
      url: "flowable/wfCategory/listAll",
      method: "get",
      cache: false,
      openPage: false,
      props: { label: "categoryName", value: "categoryId" },
      translation: true,
      tagColors: true
    },
    commonRules: {
      required: true,
      message: "请选择流程分类"
    }
  },
  {
    title: "流程版本",
    dataIndex: "version",
    align: "center",
    addDisplay: false,
    editDisplay: false
  },
  {
    title: "描述",
    dataIndex: "description",
    align: "center",
    formType: "textarea",
    autoSize: { minRows: 3, maxRows: 6 },
    maxLength: 200,
    showWordLimit: true
  },
  {
    title: "创建时间",
    dataIndex: "createTime",
    align: "center",
    addDisplay: false,
    editDisplay: false
  }
]);

const handleOpenDesigner = (row: any) => {
  dialog.visible = true;
  dialog.title = "流程设计 - " + row.modelName;
};
const handleOk = () => {};

const handleCancel = () => {
  dialog.visible = false;
};
const handleSaveDesigner = (saveData: string) => {};
</script>
<style lang="less" scoped>
:deep(.arco-select-view-single) {
  width: 220px;
}
</style>
